import * as React from 'react';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Avatar from '@mui/material/Avatar';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';

import "./Account.scss";


const userName = "Данила К."


export default function Account() {
  const [auth, setAuth] = React.useState(true);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleChange = (event) => {
    setAuth(event.target.checked);
  };

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
        <Toolbar>
          {auth && (
            <div style={{display: "flex", alignItems: "center"}}>
                <IconButton 
                    onClick={handleMenu}
                    sx={{ p: "1" }}
                    aria-label="account of current user"
                    aria-controls="menu-appbar"
                    aria-haspopup="true"
                    color="inherit">
                <Avatar alt="account_icon" src="AccountIcon.svg" 
                        style={{width: "1.0cm",
                                height: "1.0cm"}}/>
                </IconButton>
                <h2 className='AccountText'>{userName}</h2> 
                <Menu
                    id="menu-appbar"
                    anchorEl={anchorEl}
                    anchorOrigin={{
                      vertical: 'bottom',
                      horizontal: 'right',
                    }}
                    keepMounted
                    transformOrigin={{
                      vertical: 'top',
                      horizontal: 'right',
                    }}
                    open={Boolean(anchorEl)}
                    onClose={handleClose}>

                    <MenuItem onClick={handleClose}>Logout</MenuItem>
                    <MenuItem onClick={handleClose}>Settings</MenuItem>
                    <MenuItem onClick={handleClose}>Restart</MenuItem>
                </Menu>
            </div>
          )}
        </Toolbar>
  );
}

